<template>
  <div>
    <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%" @close="closeBox">
      <span style="display: block; text-align: center; font-weight: 700">表单</span><br />
      <Form ref="loginBox"></Form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Form from "../views/form.vue";
export default {
  components: { Form },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    closeBox() {
      // 通过refs的方式可以访问到组件中的方法,可以调用函数
      this.$refs.loginBox.resetForm();
    },
  },
};
</script>
<style lang="css" scoped>
span {
  font-weight: 400;
  font-size: 20px;
}
</style>
